/* eslint-disable react-hooks/exhaustive-deps */
import React, { useEffect, useRef, useState } from 'react'
import recentStyle from '@/styles/recent.module.scss'
import { recentVideo } from '@/api/recent'
import { Card } from 'antd';
import { useNavigate } from 'react-router-dom';

export default function RecentVideo() {
    let videoData = []; //请求到的原本的数据
    const [videoList, setVideoList] = useState([]); //歌曲列表数据
    const { Meta } = Card;
    const index = useRef(0)

    const getRecentVideo = () => {
        recentVideo().then(res => {
            videoData = res.data.data.list;
            handleList();
        })
    }

    const navigate = useNavigate();
    const toDetail = (id) => {
        navigate(`/mv/details/${id}`);
    };

    const handleTime = time => { //处理时间戳
        const date = new Date(time);
        const Y = date.getFullYear() + '-';
        const M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
        const D = (date.getDate() < 10 ? '0' + (date.getDate()) : date.getDate());
        return Y + M + D;
    }

    const handleDur = time => { //处理时长
        time /= 1000;
        let m = time / 60 + '';
        m = m.split('.')[0];
        let s = time % 60 + '';
        s = s.split('.')[0];
        return m + ':' + s;
    }

    const handleList = () => { //将原始数据进行处理
        const list = [];
        videoData.forEach((item, i) => {
            list[i] = {};
            list[i].time = handleTime(item.playTime);
            list[i].dur = handleDur(item.data.duration);
            list[i].cover = item.data.coverUrl;
            if (item.resourceType === 'MV') {
                list[i].type = true;
                list[i].name = item.data.name;
                list[i].artists = '';
                list[i].id = item.resourceId;

                item.data.artists
                    .forEach((item, index) => {
                        if (index === 0) {
                            list[i].artists += item.name;
                        } else {
                            list[i].artists += `/${item.name}`;
                        }
                    })
            } else if (item.resourceType === 'MLOG') {
                list[i].type = false;
                list[i].title = item.data.title;
                list[i].creator = item.data.creator.nickname;
            }

        });
        setVideoList(l => list);
    }

    useEffect(() => {
        getRecentVideo();
    }, [])

    const handleKey = id => {
        id += index.current + '';
        index.current++;
        return id;
    }

    return (
        <div className={recentStyle.box}>
            {
                videoList.map((item) => {
                    if (item.type) {
                        return (
                            <Card
                                key={handleKey(item.id)}
                                onClick={() => toDetail(item.id)}
                                hoverable={true}
                                style={{
                                    width: 300,
                                    height: 300,
                                    marginBottom: 50,
                                    position: 'relative'
                                }}
                                cover={
                                    <img style={{ height: '200px' }} alt="example" src={item.cover} />
                                }
                            >
                                <span className={recentStyle.mv}>MV</span>
                                <span className={recentStyle.time}>{item.time}</span>
                                <Meta
                                    title={item.name}
                                    description={`${item.dur} ${item.artists}`}
                                />
                            </Card>
                        )
                    } else {
                        return (
                            <Card
                                key={handleKey(item.id)}
                                hoverable={true}
                                style={{
                                    width: 300,
                                    height: 300,
                                    marginBottom: 50,
                                    position: 'relative'
                                }}
                                cover={
                                    <img style={{ height: '200px' }} alt="example" src={item.cover} />
                                }
                            >
                                <span className={recentStyle.time}>{item.time}</span>
                                <Meta
                                    title={item.title}
                                    description={`${item.dur} by${item.creator}`}
                                />
                            </Card>
                        )
                    }
                })
            }
        </div>
    )
}
